<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <el-dialog :visible.sync="show" width="600px" :destroy-on-close="true" title="商品管理" :close-on-click-modal="false">
        <el-form size="small" label-position="right" label-width="130px" v-loading="loading">

            <el-form-item label="商品名称" label-position="left">
                <el-input style="width: 400px" v-model="currentItem.name" />
            </el-form-item>

            <el-form-item label="商品图片" label-position="left">
                <images-picker @delete="deleteHandle" @change="changeHandle" @append="appendHandle" @drag="dragHandle"
                    v-model="imgItems" :limit="100" :file-types="['image']"></images-picker>
                <div style="font-size: 10px; color: #999">
                    <i class="el-icon-info"></i>
                    最佳图片尺寸 宽度600px，高度600px 或同比例
                </div>
            </el-form-item>

            <el-form-item label="商品原价(元)">
                <el-input-number controls-position="right" style="width: 200px;" v-model="currentItem.original_price"
                    :min="0" :max="999999999" />
            </el-form-item>

            <el-form-item label="用户兑换数量限制" label-position="left">
                <el-input-number controls-position="right" style="width: 200px;"
                    v-model="currentItem.user_exchange_limit" :min="0" :max="999999999" />
                <div style="font-size: 10px; color: #999">
                    <i class="el-icon-info"></i>
                    同一个用户最多兑换几个商品
                </div>
            </el-form-item>

            <el-form-item label="商品类型"  v-if="!currentItem.id">
                <el-radio-group v-model="currentItem.is_virtual">
                    <el-radio :label="true">虚拟商品</el-radio>
                    <el-radio :label="false">实物商品</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="商品限量" label-position="left" v-if="currentItem.id">
                <el-input-number controls-position="right" style="width: 200px;" v-model="currentItem.quota" :min="0"
                    :max="999999999" />
                <div style="font-size: 10px; color: #999">
                    <i class="el-icon-info"></i>
                    商品兑换数量上限（须低于库存数量）
                </div>
            </el-form-item>

            <el-form-item label="商品分类" label-position="left">
                <el-input style="width: 400px" v-model="currentItem.category" />
            </el-form-item>

            <el-form-item label="商品单位" label-position="left">
                <el-input style="width: 400px" v-model="currentItem.unit_name" />
            </el-form-item>

            <el-form-item label="商品销量">
                <el-input-number controls-position="right" style="width: 200px;" v-model="currentItem.sales" :min="0"
                    :max="999999999" />
            </el-form-item>

            <el-form-item label="排序">
                <el-input-number controls-position="right" style="width: 200px;" v-model="currentItem.sort" />
                <div style="font-size: 10px; color: #999">
                    <i class="el-icon-info"></i>
                    显示顺序为：从小到大
                </div>
            </el-form-item>

            <el-form-item label="热门">
                <el-switch style="width: 200px" active-text="开启" inactive-text="关闭"
                    v-model="currentItem.is_hot"></el-switch>
            </el-form-item>

            <el-form-item label="是否包邮">
                <el-radio-group v-model="currentItem.is_postage">
                    <el-radio :label="true">包邮</el-radio>
                    <el-radio :label="false">邮费到付</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="商品介绍" label-position="left">
                <html-editor :height="600" v-model="currentItem.introduce"></html-editor>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="mini" type="default" icon="el-icon-close" @click="cancleHandle" :disabled="loading">取消</el-button>
            <el-button size="mini" type="primary" icon="el-icon-check" @click="submitHandle" :disabled="loading">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import ImagePicker from "@/components/ImagePicker";
import HtmlEditor from "@/components/HtmlEditor";
import ImagesPicker from "./Images.vue";
import {
    createScoreGood,
    updateScoreGood,
} from "@/api/score-good";
export default {
    name: "itemForm",
    components: { ImagePicker, HtmlEditor, ImagesPicker },

    EnumerationSelectorprops: {},
    data() {
        return {
            currentItem: {},
            show: false,
            loading: false,
        };
    },
    computed: {
        canSubmit: function () {
            var h = this.currentItem;
            if (h.desc && h.name && h.expired_at) {
                return true;
            }
            return false;
        },
        imgItems: {
            get() {
                if (this.currentItem.images) {
                    var arr = this.currentItem.images.split(",");
                } else {
                    var arr = [];
                }
                const objects = arr.map((str, index) => {
                    return {
                        id: index + 1,
                        filetype: "image",
                        url: str,
                    };
                });
                console.log(arr, objects, "1313");
                return objects;
            },
            set(val) {
                const urls = val.map((obj) => obj.url);
                const concatenated = urls.join(",");
                this.currentItem.images = concatenated;
            },
        },
    },
    watch: {},
    methods: {
        openDialog: function (item) {
            this.currentItem = item;
            this.show = true;
        },

        cancleHandle: function () {
            this.show = false;
            this.currentItem = {};
        },
        submitHandle: function () {
            var isok = this.validate(this.currentItem);
            if (!isok) {
                return;
            }
            var isNew = !this.currentItem.id;
            if (isNew) {
                return this.doCreate();
            }
            return this.doUpdate();
        },

        doCreate: function () {
            this.loading = true;
            createScoreGood(this.currentItem).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    this.$message.success("创建成功");
                    this.loading = false;
                    this.show = false;
                    this.$emit("change", {});
                }
            });
        },

        doUpdate: function () {
            var _this = this;
            this.loading = true;
            updateScoreGood(this.currentItem).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    _this.$message.success("保存成功");
                    _this.$emit("change", {});
                    this.show = false;
                    _this.loading = false;
                }
            });
        },

        validate: function (data) {
            if (!data.images) {
                this.$message.error("请上传图片");
                return false;
            }
            if (!data.name) {
                this.$message.error("请输入商品名称");
                return false;
            }
            // if (!data.score) {
            //     this.$message.error("请输入商品积分");
            //     return false;
            // }
            if (!data.original_price) {
                this.$message.error("请输入商品原价");
                return false;
            }
            if (!data.user_exchange_limit) {
                this.$message.error("请输入商品兑换限制");
                return false;
            }
            // if (!data.quota) {
            //     this.$message.error("请输入商品限量");
            //     return false;
            // }
            if (!data.category) {
                this.$message.error("请输入商品分类");
                return false;
            }
            if (!data.unit_name) {
                this.$message.error("请输入商品单位");
                return false;
            }
            // if (!data.stock) {
            //     this.$message.error("请输入商品库存");
            //     return false;
            // }
            if (!data.sales) {
                this.$message.error("请输入商品销量");
                return false;
            }
            if (!data.introduce) {
                this.$message.error("请输入商品介绍");
                return false;
            }

            // TODO
            return true;
        },


        deleteHandle: function (index) {
            console.log("delete handle", index);
            // TODO
            // var mid = this.imgItems[index].id;
            var imgItems = this.imgItems;
            imgItems.splice(index, 1);
            this.imgItems = imgItems;
        },

        appendHandle: function (items) {
            if (items.length == 0) {
                this.$message.success("添加成功");
                this.loading = false;
                this.loadData();
                return;
            }
            console.log("append handle", items);
            // 添加照片
            var arr = this.imgItems.concat(items);
            console.log(arr, "1212");
            this.imgItems = arr;
        },

        changeHandle: function (e) {
            // 修改了某个文件的链接
            console.log("change handle", e);
            // var obj = this.objs[e.index];
            var url = e.item.url;
            this.imgItems[e.index].url = url;
        },

        dragHandle: function (items) {
            // 移动完成
            // TODO
            this.imgItems = items;
        },
    },
};
</script>

<style scoped>
.tips ul {
    padding: 0;
    margin: 0;
}

.tips {
    font-size: 12px;
    color: #999;
}

.show-more {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
}

.icon-uploader {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    width: 100%;
    min-height: 100px;
    border: 2px dashed #f4f4f4;
}

.icon-uploader .el-upload {
    width: 100%;
    height: 100%;
}
</style>
